<script lang="ts" setup>
import View from '@/components/View/index.vue'
import { fetchNav } from '@/api'
import { set } from '@vueuse/core'
import Article from './article.vue'

const loading = ref(false)
const state = reactive<any>({
  // 列表数据
  paneData: [],
  paneList: [],
})

// 获取列表
const getList = () => {
  set(loading, true)

  fetchNav().then((res) => {
    Array.isArray(res.rows) && (state.paneData = res?.rows)
    setPaneList(1)

    setTimeout(() => {
      set(loading, false)
    }, 80)
  })
}

getList()

const findPane = (key: number) => {
  return state.paneData.find((pane: any) => pane.id === +key)
}

const setPaneList = (id: number) => {
  state.navId = findPane(id)?.id
}

const onTab = (key: any) => {
  setPaneList(key)
}
</script>
<template>
  <View class="app-page-artilce-list" :loading="loading">
    <a-tabs default-active-key="1" @tab-click="onTab">
      <a-tab-pane v-for="pane in state.paneData" :key="pane.id" :title="pane.title" />
    </a-tabs>
    <Article :nav-id="state.navId" />
  </View>
</template>
<style lang="scss"></style>
